<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">推广名片</block>
		</cu-custom>

		<view class="b-box" id="img" ref="imageWrapper" :style="`background-image:url(${bgList[YMTCardSetModel.BackGroundCode]});`">
			<!-- 模板1 -->
			<view class="ptb30" v-if="YMTCardSetModel.CssCode == 0">
				<view>
					<view class="fs38 fw600" v-text="YMTCardSetModel.Name"></view>
					<view class="text-muted fs28 mt5" v-text="YMTCardSetModel.Company"></view>
				</view>
				<view style="padding: 70rpx 0rpx;" class="b-line-bottom">
					<view class="flex align-center" v-if="YMTCardSetModel.IsShowPhone == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Phone"></text>
					</view>
					<view class="flex align-center mt15" v-if="YMTCardSetModel.IsShowEmail == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Email"></text>
					</view>
					<view class="flex align-center mt15" v-if="YMTCardSetModel.IsShowAddress == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Province + YMTCardSetModel.City + YMTCardSetModel.Area + YMTCardSetModel.Address"></text>
					</view>
				</view>
				<view class="tc" style="padding: 100rpx 0px;"><image :src="qrcode" mode="" class="img250"></image></view>
			</view>

			<!-- 模板2 -->
			<view class="ptb30" v-if="YMTCardSetModel.CssCode == 1">
				<view class="tc">
					<view class="fs38 fw600 text-white" v-text="YMTCardSetModel.Name"></view>
					<view class="text-muted fs28 mt5" v-text="YMTCardSetModel.Phone" v-if="YMTCardSetModel.IsShowPhone == 1"></view>
				</view>
				<view style="padding: 70rpx 0rpx;" class="b-line-bottom">
					<view class="flex justify-center" v-if="YMTCardSetModel.IsShowEmail == 1"><text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Email"></text></view>
					<view class="flex justify-center mt15"><text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Company"></text></view>
					<view class="flex justify-center mt15" v-if="YMTCardSetModel.IsShowAddress == 1">
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Province + YMTCardSetModel.City + YMTCardSetModel.Area + YMTCardSetModel.Address"></text>
					</view>
				</view>
				<view class="tc" style="padding: 100rpx 0px;"><image :src="qrcode" mode="" class="img250"></image></view>
			</view>
			<!-- 模板3 -->
			<view class="ptb30" v-if="YMTCardSetModel.CssCode == 2">
				<view class="tc b-line-bottom" style="padding-bottom: 70rpx;">
					<view style="padding:50rpx 0px;"><image :src="qrcode" mode="" class="img250"></image></view>
					<view class="fs38 fw600 text-white" v-text="YMTCardSetModel.Name"></view>
					<view class="text-muted fs28 mt5" v-text="YMTCardSetModel.Company"></view>
				</view>
				<view style="padding: 70rpx 0rpx;">
					<view class="flex align-center" v-if="YMTCardSetModel.IsShowPhone == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Phone"></text>
					</view>
					<view class="flex align-center mt15" v-if="YMTCardSetModel.IsShowEmail == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Email"></text>
					</view>
					<view class="flex align-center mt15" v-if="YMTCardSetModel.IsShowAddress == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Province + YMTCardSetModel.City + YMTCardSetModel.Area + YMTCardSetModel.Address"></text>
					</view>
				</view>
			</view>
			<!-- 模板4 -->
			<view class="ptb30" v-if="YMTCardSetModel.CssCode == 3">
				<view class="tc b-line-bottom" style="padding-bottom: 45rpx;">
					<view class="flex align-center" v-if="YMTCardSetModel.IsShowPhone == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Phone"></text>
					</view>
					<view class="flex align-center mt15" v-if="YMTCardSetModel.IsShowEmail == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Email"></text>
					</view>
					<view class="flex align-center mt15" v-if="YMTCardSetModel.IsShowAddress == 1">
						<image
							src=""
							mode=""
							class="img30"
						></image>
						<text class="fs28 text-muted ml10" v-text="YMTCardSetModel.Province + YMTCardSetModel.City + YMTCardSetModel.Area + YMTCardSetModel.Address"></text>
					</view>
				</view>
				<view style="padding: 70rpx 0px;" class="tc">
					<view class="fs38 fw600 text-white" v-text="YMTCardSetModel.Name"></view>
					<view class="text-muted fs28 mt5" v-text="YMTCardSetModel.Company"></view>
					<view class="code-1"><image :src="qrcode" mode="" class="img250"></image></view>
				</view>
			</view>
		</view>
		<view class="uni-btns_fixed-bottom flex fixed-1" v-if="!editStatus">
			<!-- <view class="flex-sub">
				<image :src="imgurl+'fx_img12.png'" mode="" class="img30"></image>
				<text class="fs28 fw600">分享</text>
			</view> -->
			<view class="flex-sub" @tap="editStatus = true">
				<image :src="imgurl + 'icon_edit_2.png'" mode="" class="img30"></image>
				<text class="fs28 fw600">编辑</text>
			</view>
			<view class="flex-sub" @tap="ToImage">
				<image :src="imgurl + 'fx_img13.png'" mode="" class="img30"></image>
				<text class="fs28 fw600">保存相册</text>
			</view>
			<!--
			<view class="flex-sub no-before-none padding-xs ml20" v-else>
				<view class="fs28 fw600 btn-1 bg-orange" style="min-width: 280rpx;">保存到相册</view>
			</view> -->
		</view>

		<view class="uni-btns_fixed-bottom" v-else>
			<view v-if="editIndex == 1">
				<view class="qui-cells">
					<view class="qui-cell" @tap="editIndex = 2">
						<view class="cell-bd"><text class="fs30">样式</text></view>
						<view class="cell-ft arrow-r"></view>
					</view>
					<navigator url="/pages/daogou/cardUserMessageEdit" class="qui-cell">
						<view class="cell-hd"><text class="fs30">对外信息</text></view>
						<view class="cell-bd"><view class="tr text-muted">姓名、手机、有些、地址、公司名</view></view>
						<view class="cell-ft arrow-r"></view>
					</navigator>
				</view>
			</view>
			<view v-show="editIndex == 2">
				<view class="qui-card">
					<view class="card__hd"><text class="fs26">选择版式</text></view>
					<view class="card__bd flex mt15">
						<view
							v-for="(item, index) in classList"
							:key="index"
							class="mr15 img-1"
							:class="{ active: YMTCardSetModel.CssCode == index }"
							@tap="YMTCardSetModel.CssCode = index"
						>
							<image :src="imgurl + item" mode=""></image>
						</view>
					</view>
				</view>
				<view class="qui-card">
					<view class="card__hd"><text class="fs26">选择背景</text></view>
					<view class="card__bd flex mt15" style="flex-wrap: wrap;">
						<view
							v-for="(item, index) in bgList"
							:key="index"
							class="mr15 img-2 mb10"
							:class="{ active: YMTCardSetModel.BackGroundCode == index }"
							@tap="YMTCardSetModel.BackGroundCode = index"
						>
							<image :src="item" mode=""></image>
						</view>
						<view class="img-1" @tap="uploadFile"><image :src="imgurl + 'f_1.png'" mode=""></image></view>
					</view>
				</view>
			</view>

			<view class="flex bor-1px-t tc padding-xs">
				<view class="flex-sub" @tap="changeEdit('close')"><view class="btn-1">返回</view></view>
				<view class="flex-sub" @tap="changeEdit('notarize')"><view class="btn-1 bg-orange text-white">确认</view></view>
			</view>
		</view>
	</view>
</template>

<script>
import base from 'utils/base.js';
import tools from 'utils/tools.js';
import html2canvas from 'utils/html2canvas.min.js';

let _self;
export default {
	components: {
		html2canvas
	},

	data() {
		return {
			dataURL: '',
			YMTCardSetModel: {
				TemplateID: 0,
				BackGroundCode: '',
				CssCode: '0',
				DIYBackGroundImage: '',
				Company: '',
				Name: '',
				IsShowAddress: 0,
				Province: 'xx省',
				City: 'xx市',
				Area: 'xx区',
				Address: 'xxx',
				IsShowEmail: 0,
				Email: '电子邮件',
				IsShowPhone: 0,
				Phone: '手机号',
				ProvinceCode: '',
				CityCode: '',
				AreaCode: ''
			},
			qrcode: '',
			editStatus: false,
			editIndex: 1, //编辑步数
			imgurl: this.$imgurl,
			classIndex: 0,
			beforeClass: {
				index: 0,
				bgIndex: 0
			}, //上一步样式
			classList: ['t_1.png', 't_2.png', 't_3.png', 't_4.png'],
			bgIndex: 0,
			bgList: [
				'',
				'',
				'',
				''
			]
		};
	},
	onLoad() {
		_self = this;
	},
	onShow: function() {
		let currentPage = this;
		currentPage.GetMyCard();
	},
	mounted() {
		let currentPage = this;

		currentPage.MakeFollowQrCode();
	},

	methods: {
		getBase64Image: function(img) {
			var canvas = document.createElement('canvas');
			canvas.width = img.width;
			canvas.height = img.height;
			var ctx = canvas.getContext('2d');
			ctx.drawImage(img, 0, 0, img.width, img.height);
			var dataURL = canvas.toDataURL('image/png');
			return dataURL;
			// return dataURL.replace("data:image/png;base64,", "");
		},
		ToImage: function() {
			uni.showLoading({
				title: '长按保存图片'
			});
			let currentPage = this;

			var content = document.getElementById('img');
			setTimeout(function() {
				try {
					html2canvas(content)
						.then(canvas => {
							uni.hideLoading();
							let dataURL = canvas.toDataURL('image/png');
							currentPage.dataURL = dataURL;
							var tempFilePaths = new Array();
							tempFilePaths.push(dataURL);

							uni.previewImage({
								urls: tempFilePaths,
								longPressActions: {
									itemList: ['保存图片'],
									success: function(data) {},
									fail: function(err) {
										console.log(err.errMsg);
									}
								}
							});
						})
						.catch(function(e) {
							uni.hideLoading();
							tools.showToast('系统版本不支持此功能，请手动截图');
						});
				} catch (e) {
					uni.hideLoading();
					tools.showToast('系统版本不支持此功能，请手动截图');
				}
			}, 1500);
		},
		save: function() {
			let currentPage = this;
			var ymtCardSetModel = currentPage.YMTCardSetModel;

			if (ymtCardSetModel.Province == 'xx省') {
				ymtCardSetModel.Province = '';
			}
			if (ymtCardSetModel.City == 'xx市') {
				ymtCardSetModel.City = '';
			}
			if (ymtCardSetModel.Area == 'xx区') {
				ymtCardSetModel.Area = '';
			}
			if (ymtCardSetModel.Address == 'xxx') {
				ymtCardSetModel.Address = '';
			}
			if (ymtCardSetModel.Email == '电子邮件') {
				ymtCardSetModel.Email = '';
			}
			if (ymtCardSetModel.Phone == '手机号') {
				ymtCardSetModel.Phone = '';
			}
			let url = '/api/ScanCodeDistribution/AddCardInfo';

			let params = {
				type: 'POST',
				url: url,
				data: ymtCardSetModel,
				sCallback: function(response) {
					if (response.IsSuccess) {
						ymtCardSetModel.TemplateID = response.Data;
					}
				}
			};
			base.request(params);
		},
		GetMyCard: function() {
			let currentPage = this;

			let globalData = getApp().globalData;
			currentPage.YMTCardSetModel.Company = globalData.Customer.Name;
			currentPage.YMTCardSetModel.Name = globalData.UserInfo.NickName;
			let params = {
				type: 'GET',
				url: '/api/ScanCodeDistribution/GetMyCard',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let card = response.Data;
						if (card != null) {
							if (!card.CssCode) card.CssCode = 0;
							currentPage.YMTCardSetModel = card;
						}
					}
				}
			};
			base.request(params);
		},
		MakeFollowQrCode: function() {
			let currentPage = this;
			let globalData = getApp().globalData;
			let qrcodeScan = uni.getStorageSync('ScanCodeDistributionQrcode');
			if (qrcodeScan) {
				currentPage.qrcode = qrcodeScan;
				return;
			}
			let params = {
				type: 'POST',
				url: '/api/ScanCodeDistribution/MakeFollowQrCode',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let qrcode = response.Data;
						currentPage.qrcode = qrcode;
						uni.setStorage({
							key: 'ScanCodeDistributionQrcode',
							data: qrcode,
							success: function() {}
						});
					}
				}
			};
			base.request(params);
		},
		// 确认样式
		changeEdit(type) {
			// 第一步
			if (_self.editIndex == 1) {
				_self.editStatus = false;
				return;
			}
			// 第二步
			if (type == 'notarize') {
				_self.beforeClass.index = _self.classIndex;
				_self.beforeClass.bgIndex = _self.bgIndex;
				_self.editStatus = false;
			} else if (type == 'close') {
				// 返回第一步
				_self.classIndex = _self.beforeClass.index;
				_self.bgIndex = _self.beforeClass.bgIndex;
			}
			_self.editIndex = 1;

			_self.save();
		},
		uploadFile() {
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					this.bgList.push(tempFilePaths[0]);
					// uni.uploadFile({
					//     url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
					//     filePath: tempFilePaths[0],
					//     name: 'file',
					//     formData: {
					//         'user': 'test'
					//     },
					//     success: (uploadFileRes) => {
					//         console.log(uploadFileRes.data);
					//     }
					// });
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-orange {
	background-color: #ff5e1f;
}
.img-1 {
	height: 74rpx;
	border-radius: 5rpx;
	image {
		width: 123rpx;
		height: 74rpx;
		border: 1px solid #ffffff;
	}
	&.active {
		image {
			border-color: red;
		}
	}
}
.btn-1 {
	height: 82rpx;
	border-radius: 41rpx;
	line-height: 82rpx;
	font-size: 30rpx;
	font-weight: bold;
}
.img-2 {
	background: #ffffff;
	height: 74rpx;
	border-radius: 5rpx;
	image {
		width: 123rpx;
		height: 74rpx;
		border: 1px solid rgba(224, 224, 224, 1);
	}
	&.active {
		image {
			border-color: red;
		}
	}
}
.code-1 {
	width: 316rpx;
	height: 316rpx;
	background: #ffffff;
	border-radius: 50%;
	text-align: center;
	margin: 0 auto;
	margin-top: 80rpx;
	padding: 20rpx;
	image {
		width: 270rpx;
		height: 270rpx;
		background: rgba(255, 255, 255, 1);
		border: 3rpx dashed rgba(210, 210, 210, 1);
		border-radius: 50%;
		padding: 50rpx;
	}
}
.b-box {
	margin: 50rpx;
	background: #ffffff;
	padding: 20rpx 50rpx;
	box-shadow: 0px 5rpx 15rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-size: 100% 100%;
}
.b-line-bottom {
	border-bottom: 1px dashed #e5e5e5;
}
.img250 {
	width: 250rpx;
	height: 250rpx;
}
.fixed-1 {
	height: 100rpx;
	line-height: 100rpx;
	.flex-sub {
		text-align: center;
		border-left: 1px solid #E5E5E;
		image {
			position: relative;
			top: 3px;
			margin-right: 10rpx;
		}
		position: relative;
	}
	.flex-sub + .flex-sub {
		&:before {
			content: '';
			width: 1px;
			height: 22rpx;
			background-color: #e5e5e5;
			position: absolute;
			left: 0px;
			top: 50%;
			margin-top: -11rpx;
		}
	}
}
</style>
